<template>
  <div>
    <div class="box">
      <span :class="{active:n==1}" @click="hot">热门推荐</span>
      <span :class="{active:n==2}" @click="bot">上新推荐</span>
      <span :class="{active:n==3}" @click="cot">所有推荐</span>
    </div>
    <div class="tu"  v-for="item in arr" :key="item.id" @click="$router.push({ name: '商品详情', params: { id: item.id } })">
      <div><img :src="$pre + item.img" alt="" /></div>
      <div>
        <div>
          <p>{{ item.goodsname }}</p>
        </div>
        <div>
          <p>价格：{{ item.market_price }}</p>
        </div>
        <button>立即抢购</button>
      </div>
    </div>
  </div>
</template>

<script>
import {reqhomegoods} from "../../../http/http"
export default {
  data() {
    return {
      arr: [],
      aarr: [],
      barr: [],
      carr: [],
      n: 1,
    };
  },
  methods: {
    hot() {
      this.n = 1;
      this.arr = this.aarr;
    },
     bot() {
      this.n = 2;
      this.arr = this.barr;
    },
     cot() {
      this.n = 3;
      this.arr = this.carr;
    },
  },
  mounted() {
    reqhomegoods().then((res) => {
      // console.log(res);
      this.arr = res.data.list[0].content;
      this.aarr = res.data.list[0].content;
      this.barr = res.data.list[1].content;
      this.carr = res.data.list[2].content;
    });
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-around;
}
.tu {
  border: 0.01rem solid #000;
  width: 7rem;
  display: flex;
}
img {
  width: 2rem;
  height: 2rem;
}
button {
  border-radius: 0.05rem;
  background: orange;
}
span{
    width: 2rem;
    height: 0.6rem;
    display: inline-block;
}
.active{
    background: rgb(6, 200, 222);
}
</style>
